<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title></title>
    <style>
        .pa-10 { padding: 10px; }
        .flex { display: flex; }
        .flex-1 { flex: 1; }
        label { min-width: 4rem; }
        .mr { margin-right: 1rem; }
    </style>
</head>
<body>
    <main class="pa-10">
        <div class="flex">
            <label class="mr">input</label>
            <input type="text" id="my-input" class="flex-1" />
        </div>
        <div class="flex">
            <label class="mr">input2</label>
            <input type="text" id="my-input2" class="flex-1" />
        </div>
    </main>
    <script type="module">
        import debounce from '../src/debounce.js';

        const $input = document.querySelector('#my-input');
        const $input2 = document.querySelector('#my-input2');

        const debouncedInput = debounce(onInput, 1000);
        $input.addEventListener('input', onInput);
        $input2.addEventListener('input', debouncedInput);
        
        function onInput(e) {
            console.log(e);
            console.log(e.target.value);
        }
    </script>
</body>
</html>
